<template>
	<view class="preview">
		<swiper circular>
			<swiper-item v-for="item in 5">
				<image @click="maskChange" src="../../common/images/preview1.jpg" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		
		<view class="mask" v-if="maskState">
			<view>遮罩层</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";
// 遮罩层展示标识
const maskState = ref(true)
const maskChange = () => {
	maskState.value = !maskState.value
}
</script>

<style lang="scss" scoped>
.preview {
	position: relative;
	width: 100%;
	height: 100vh;
	
	swiper {
		width: 100%;
		height: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.mask {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		&>view{
			position: absolute;
			left: 0;
			right: 0;
			color: red;
			width: fit-content;
		}
	}
}
</style>
 
